<template>
  <div class="threeBox">
    <canvas id="c"></canvas>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// import './style.css'
import * as THREE from 'three'

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
onMounted(() => {
  const canvas = document.querySelector('#c')
  const renderer = new THREE.WebGLRenderer({ canvas })
  const scene = new THREE.Scene()
  // camera.position.z = 2
  const camera = new THREE.PerspectiveCamera(
    45, //视角
    1920 / 923, //宽高比
    0.1, //近平面
    10000 //远平面
  )
  const box = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(box, material)
  scene.add(cube)
  camera.position.set(0, 5, 10)
  camera.lookAt(0, 0, 0)
  function animate () {
    requestAnimationFrame(animate)
    // cube.position.x += 0.01
    // cube.rotation.x += 0.01
    // if (cube.position.x > 5) {
    //   cube.position.x = 0
    // }
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
})


</script>

<style scoped
  lang="scss">
  .threeBox {
    width: 1920px;
    height: 923px;

    canvas {
      width: 100%;
      height: 100%;
    }
  }
</style>
